<template>
    <div class="material">
        <!-- 按钮操作 -->
        <custom-setbtn>
            <template #l_btn>
                <div class="l_btn">
                    <el-button type="primary" size="mini" @click="createRules">添加新规则</el-button>
                </div>
            </template>
        </custom-setbtn>
        <div class="tableList">
            <el-table :data="rulesData" border style="width: 100%"
                :header-cell-style="{background:'#fafafa',color:'#000',fontWeight:400,fontSize:'12px'}"
                :cell-style="{color:'#5a5a5a',fontSize:'12px',fontWeight:400}" v-loading="loading"
                element-loading-text="加载中" element-loading-background="rgba(250, 250, 250, 0.5)"
                element-loading-spinner="el-icon-loading">
                <el-table-column label="序号" width="80">
                    <template slot-scope="scope">
                        <span>{{(listPayload.page - 1) * (listPayload.limit) + scope.$index + 1}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="checkRule" label="检验规则" min-width="300px">
                </el-table-column>
                <el-table-column prop="errMsg" label="错误提示" min-width="200px">
                </el-table-column>
                <el-table-column label="状态" width="80px">
                    <template slot-scope="scope">
                        {{scope.row.state ? '启用' : '未启用'}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180">
                    <template slot-scope="scope">
                        <el-button type="text" size="small" @click="handleRule(scope.row)">编辑
                        </el-button>
                        <el-popconfirm placement='top' confirm-button-text='删除' @confirm="confirmDel(scope.row.id)"
                            title="确认删除规则？删除后不可恢复">
                            <el-button slot="reference" type="text" size="small" style="margin-left:10px">删除</el-button>
                        </el-popconfirm>
                    </template>
                </el-table-column>
                <div slot="empty">
                    <el-empty :image-size='100'></el-empty>
                </div>
            </el-table>
            <el-pagination v-if="total" @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :page-sizes="[10,20,50,100]" :page-size="ruleForm.limit" layout="total, prev, pager, next, sizes"
                :total="total" background>
            </el-pagination>
        </div>
        <el-dialog :title="diaName + '规则'" :visible.sync="dialogVisible" width="700px" custom-class='edit'
            :close-on-click-modal='false'>
            <div class="bodyForm">
                <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="200px" size="mini">
                    <el-form-item label="校验规则" prop="checkRule">
                        <el-button type="primary" size="mini" 
                            :icon="diaName != '编辑' ? 'el-icon-circle-plus-outline' : 'el-icon-edit-outline'" 
                            plain
                            @click="computingFormula = ruleForm.checkRule,editVisible = true">
                                {{diaName == '编辑' ? '修改' : '添加'}}</el-button>
                            <el-popover
                                placement="top"
                                trigger="hover"
                                :content="ruleForm.checkRule"
                                >
                                <div class="fx" slot="reference" v-show="ruleForm.checkRule.length">
                                    <span class="iconfont icon-icon_fx"></span>
                                    <span>{{ruleForm.checkRule}}</span>
                                </div>
                            </el-popover>
                    </el-form-item>
                    <el-form-item label="错误提示" prop="errMsg">
                        <el-input v-model="ruleForm.errMsg" placeholder="请输入" class="input"></el-input>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select v-model="ruleForm.state" filterable>
                            <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="changeRules" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="编辑计算公式" :visible.sync="editVisible" width="500px">
            <el-input type="textarea" v-model="computingFormula" show-word-limit maxlength="1000" :autosize="{ minRows:8}"
                ></el-input>
            <div class="footer__18hF6">
                <p>支持英文模式下符号:</p>
                <p>运算符号：加 (+)、减 (-)、乘 (*)、除 (/)</p>
                <p>判断符号：等于 (==)、不等于 (!=)、大于 (>)、小于 (<)、大于等于 (>=)、小于等于 (<=)</p>
                <p>条件符号：且 (&&)、或（||）</p>
                <p>语法符号：小括号 (())、大括号 ({})、dollar符 ($)、逗号 (,)、分号 (;)、双引号 (")、单引号 (')</p>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button size="mini" @click="editVisible = false">取 消</el-button>
                <el-button type="primary" size="mini" @click="ruleForm.checkRule = computingFormula,editVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import {
        ruleList,
        ruleEdit,
        ruleDel
    } from '@/api/customFieldController'
    export default {
        data() {
            return {
                loading: false,
                rulesData: [],
                total: 0,
                dialogVisible: false,
                editVisible: false,
                ruleForm: {
                    checkRule: '',
                    errMsg: '',
                    state: '',
                },
                options: [{
                    value: 0,
                    label: '未启用'
                }, {
                    value: 1,
                    label: '启用'
                }],
                rules: {
                    checkRule: {
                        required: true,
                        message: '校验规则不能为空',
                        trigger:'change'
                    },
                    errMsg: {
                        required: true,
                        message: '错误提示不能为空',
                        trigger:'blur'
                    },
                },
                computingFormula:'',
                diaName:'创建新',
                id:'',
                listPayload:{
                    page:1,
                    limit:10
                }
            }
        },
        mounted(){
            this.getRuleList(this.listPayload)
        },
        methods: {
            //校验规则列表
            getRuleList(data) {
                this.loading = true
                ruleList(data).then(res => {
                    if (res.code == 200) {
                        this.rulesData = res.data.records
                        this.total = res.data.total
                    }
                    this.loading = false
                })
            },
            //校验规则编辑
            getRuleEdit(data) {
                ruleEdit(data).then(res => {
                    if (res.code == 200) {
                        this.getRuleList(this.listPayload)
                        this.dialogVisible = false
                        this.utils.showMsg('编辑成功!','success')
                    }
                })
            },
            //校验规则删除
            getRuleDel(data) {
                ruleDel(data).then(res => {
                    if (res.code == 200) {
                        this.getRuleList(this.listPayload)
                        this.utils.showMsg('规则删除成功','success')
                    }
                })
            },
            //添加新规则
            createRules(){
                this.diaName = '创建新'
                this.id = ''
                this.ruleForm.checkRule = ''
                this.ruleForm.errMsg = ''
                this.ruleForm.state = 0
                this.dialogVisible = true
            },
            handleRule(row){
                this.diaName = '编辑'
                this.id = row.id
                this.ruleForm.checkRule = row.checkRule
                this.ruleForm.errMsg = row.errMsg
                this.ruleForm.state = row.state
                this.dialogVisible = true
            },
            //删除 
            confirmDel(id) {
                this.getRuleDel({id})
                let totalPage = Math.ceil((this.total - 1) / this.listPayload.limit)
                let currentPage = this.listPayload.page > totalPage ? totalPage : this.listPayload.page
                this.listPayload.page = currentPage < 1 ? 1 : currentPage
            },
            changeRules(){
                let payLoad = this.ruleForm
                payLoad.id = this.id
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) this.getRuleEdit(payLoad)
                })
            },
            //pageSize 改变时会触发
            handleSizeChange(val) {
                this.listPayload.limit = val
                this.getRuleList(this.listPayload)
            },
            //currentPage 改变时会触发
            handleCurrentChange(val) {
                this.listPayload.page = val
                this.getRuleList(this.listPayload)
            },
        }
    }
</script>

<style lang="less" scoped>
    .material {
        .tableList {
            padding: 0 20px;
        }

        .bodyForm {
            border: 1px solid #edeef3;
            background: #fbfbfb;
            padding: 20px 0;
        }

        /deep/ .el-dialog__title {
            color: rgba(0, 0, 0, .85);
            font-weight: 500;
            font-size: 14px;
        }

        /deep/ .el-dialog.edit {
            .el-dialog__body {
                padding: 20px 55px;
            }
        }

        .el-input--mini.input {
            width: 70%;
        }

        .el-select {
            width: 70%;
        }

        /deep/ .el-dialog__body {
            padding-bottom: 0;
        }

        /deep/ .el-textarea__inner{
            font-family: sans-serif;
        }

        .footer__18hF6 {
            margin-top: 10px;
            padding: 10px;
            background-color: rgb(250, 250, 250);
            color: rgb(153, 153, 153);
            border-radius: 2px;
        }

        .fx{
            width: 100%;
            padding: 10px;
            border: 1px solid rgb(229, 229, 229);
            border-radius: 3px;
            background-color: rgb(250, 250, 250);
            line-height: 20px;
            overflow: hidden;
            text-overflow: ellipsis;
            overflow-wrap: break-word;
            word-break: break-all;
            white-space: nowrap;
            margin-top: 5px;
            display: flex;
            align-items: center;
            font-size: 14px;
            span:nth-child(1){
                color: rgb(2, 185, 128);
                font-size: 20px;
            }
            span:nth-child(2){
                margin-left: 10px;
            }
        }
    }
</style>